<template>
  <div class="dashboard-wrapper">
    <div class="dashhoard-top">
      <el-form :inline="true" :model="search">
        <el-form-item label="姓名">
          <el-input v-model="search.username" placeholder="请输入姓名"></el-input>
        </el-form-item>
        <el-form-item label="身份证号">
          <el-input v-model="search.idCard" placeholder="请输入身份证号"></el-input>
        </el-form-item>
        <el-form-item label="入院时间">
          <el-date-picker v-model="search.startDate" type="date" placeholder="请选择入院日期"></el-date-picker>
        </el-form-item>
        <el-form-item label="出院时间">
          <el-date-picker v-model="search.endDate" type="date" placeholder="请选择出院日期"></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSearch">查询</el-button>
          <el-button type="success" @click="clickExport">导出</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="table-wrapper">
      <el-table v-loading="loading" :data="tableData" border style="width: 100%" max-height="500">
        <el-table-column prop="name" align="center" label="姓名" fixed />
        <el-table-column prop="idCard" align="center" label="身份证号" width="160" />
        <el-table-column prop="staffType" align="center" label="员工类型(在职或退休)" width="160" />
        <el-table-column
          prop="medicalHospitalCode"
          align="center"
          label="就诊医院（鲁中医院或其他医院）"
          width="235"
        />
        <el-table-column prop="totalInMedicalCost" align="center" label="累计医保统筹内费用(元)" width="180" />
        <el-table-column
          prop="totalMedicalReimbursementCost"
          align="center"
          label="累计医保报销费用(元)"
          width="160"
        />
        <el-table-column prop="totalSelfpayCost" align="center" label="累计医保内自付费用（E-F）" width="200" />
        <el-table-column prop="totalBFirstCost" align="center" label="累计乙类首先自付费用(元)" width="190" />
        <el-table-column prop="qlshAmountPayable" align="center" label="齐鲁石化应赔付金额(元)" width="180" />
        <el-table-column prop="rbjkAmountPayable" align="center" label="人保健康应赔付金额(元)" width="180" />
        <el-table-column
          prop="qlshRestReimbursement"
          align="center"
          label="齐鲁石化报销剩余部分(元)"
          width="190"
        />
        <el-table-column
          prop="rbjkRestReimbursement"
          align="center"
          label="人保健康报销剩余部分(元)"
          width="190"
        />
        <el-table-column
          prop="secondReimbursementAmount"
          align="center"
          label="二次报销金额(元)"
          width="130"
        />
      </el-table>
      <!-- <el-pagination
        class="pagination"
        background
        layout="prev, pager, next"
        :total="total"
        :page-size="10"
        @current-change="clickCurrent"
      ></el-pagination>-->
    </div>
  </div>
</template>

<script>
import { getClaimToTotal, outExcel } from "@/api/claim";
import getPdf from "@/utils/htmlToPdf";
// eslint-disable-next-line
/* eslint-disable */
export default {
  name: "totalClaims",
  data() {
    return {
      loading: false,
      search: {
        username: "",
        idCard: "",
        startDate: "",
        endDate: ""
      },
      tableData: []
    };
  },
  methods: {
    onSearch() {
      this.loading = true;
      let user = Boolean(this.search.username && this.search.idCard);
      let card = !this.search.username && !this.search.idCard;
      if (user || card) {
        getClaimToTotal({
          name: this.search.username,
          idCard: this.search.idCard,
          inHospitalDate: this.search.startDate,
          outHospitalDate: this.search.endDate
        }).then(res => {
          if (res.code === 40000) {
            this.tableData = res.data.dataList;
            this.loading = false;
          }
        });
      } else {
        this.$message({
          message: "姓名和身份证号必须同时为空或不为空！",
          center: true,
          type: "warning",
          showClose: true,
          duration: 1 * 1000
        });
      }
    },
    clickExport() {
      outExcel({
        name: this.search.username,
        idCard: this.search.idCard,
        inHospitalDate: this.search.startDate,
        outHospitalDate: this.search.endDate
      }).then(res => {
        let blob = new Blob([res], { type: "application/vnd.ms-excel" });
          const fileName = "合计表格.xls";
          if ("download" in document.createElement("a")) {
            // 非IE下载
            const link = document.createElement("a");
            link.download = fileName;
            link.style.display = "none";
            link.href = URL.createObjectURL(blob);
            document.body.appendChild(link);
            link.click();
            URL.revokeObjectURL(link.href); // 释放URL 对象
            document.body.removeChild(link);
          } else {
            // IE10+下载
            navigator.msSaveBlob(blob, fileName);
          }
      });
    },
    clickCurrent(page) {
      console.log(page);
    }
  },
  created() {
    this.onSearch();
  }
};
</script>

<style lang="scss" scoped>
.table-wrapper {
  margin: 20px;
  /deep/ .el-table--scrollable-x .el-table__body-wrapper {
    border-top: 1px solid #efefef;
  }
  /deep/ .el-table__fixed-body-wrapper {
    border-top: 1px solid #efefef;
  }
}
.input {
  width: 240px;
}
.dashhoard-top {
  margin-top: 20px;
  margin-left: 20px;
}
</style>
